<template>
  <div>
    <el-form :model="info" ref="commentForm" :rules="rules">
    <el-form-item prop="content">
        <el-input id="form" type="textarea" :placeholder="info.rname!=''?'@'+info.rname:''" :rows="5" v-model="info.content" :class="dayModel===false?'dBColor':''"></el-input>
    </el-form-item>
    <el-row>
      <el-col :sm="{span:7}">
        <el-form-item label="昵称" prop="name">
            <el-input v-model="info.name" :class="dayModel===false?'dBColor':''"></el-input>
        </el-form-item>
      </el-col>
      <el-col :sm="{span:7,offset:1}">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="info.email" :class="dayModel===false?'dBColor':''"></el-input>
        </el-form-item>
      </el-col>
      <el-col :sm="{span:7,offset:1}">
        <el-form-item class="picStyle">
            <el-popover placement="top" :width="300" trigger="click">
              <template #reference>
                <el-button type="success" @click="submit('commentForm')">提交</el-button>
              </template>
              <SliderVerify
                  v-model:is-show-self="sliderVConf.isShowSelf"
                  :imgUrl="sliderVConf.imgUrl"
                  v-model:isShowSelf="sliderVConf.isShowSelf"
                  :isBorder="sliderVConf.isBorder"
                  :isParentNode="sliderVConf.isParentNode"
                  :isCloseBtn="sliderVConf.isCloseBtn"
                  :isReloadBtn="sliderVConf.isReloadBtn"
                  :width="sliderVConf.width"
                  :height="sliderVConf.height"
                  @success="commit"
              ></SliderVerify>
            </el-popover>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div :class="dayModel===true?'lBColor':'dBColor'">
    <div v-for="items in infos">
      <template v-for="(item,index) in items">
        <el-row :class="index===0?'father':'children'">
          <el-col :sm="{span:3}" :xs="{span:5}">
            <img :src="index%2===0?imgUrl.url1:imgUrl.url2" width="70" height="70" style="border-radius: 70px">
          </el-col>
          <el-col :sm="{span:20,offset:1}" :xs="{span:18,offset: 1}">
            <div class="nickname">
              {{item.name}}<span class="toBody" v-if="item.rname" v-text="'@'+item.rname"></span>
              <el-tag type="danger" size="mini" style="margin-left: 10px" v-if="item.isAdmin">博主</el-tag>
            </div>
            <div class="comment" v-text="item.content"></div>
            <el-button type="text" style="color: #ffdcb7" @click="gotoComment(item.name,item.parentId,item.id)">回复</el-button>
            <el-button type="text" style="color: red" size="mini" v-if="isAdminValue" @click="deleteById(item.id)">删除</el-button>
            <div class="dateStyle" v-text="item.cdate"></div>
          </el-col>
          </el-row>
      </template>
    </div>
  </div>
  </div>
</template>
<script>
import axios from "axios"
export default {
  name: 'Comment',
  data(){
    return{
      info: {
        content: '',
        name: '',
        email: '',
        bid: '',
        rname: '',
        parentId: '',
        md5Password: null,
      },
      imgUrl: {
        url1: require("../assets/image/comment1.jpg"),
        url2: require("../assets/image/comment2.jpg")
      },
      isAdminValue: false,
      adminInfo: {
        username: '',
        password: null,
      },
      deleteInfo: {
        id: null,
        md5Password: null
      },
      infos: [],
      rules: {
        content: [
          {required: true,message:'评论内容为空',trigger:'blur'}],
        name: [
          {required: true,message:'用户名为空',trigger:'blur'}
        ],
        email: [
          {type: 'email',required: true,message:'请输入正确的邮箱地址',trigger:'blur'}
        ]
      },
      sliderVConf: {
        isShowSelf: false,
        width: 300,
        height: 180,
        imgUrl: '',
        isBorder: true,
        isCloseBtn: true,
        isReloadBtn: true,
        isParentNode: false
      }
    }
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    },
    b_id(){
      return this.$store.state.bId;
    }
  },
  mounted(){
   this.getInfo();
   this.isAdmin();
  },
  methods: {
    deleteById(id){
      this.deleteInfo.id = id;
      this.deleteInfo.md5Password = localStorage.getItem("password");
      axios.post("/admin/deleteComment",this.deleteInfo).then( (res) => {
        if ( res.data === true){
          this.$message.success("删除成功");
          this.getInfo();
        }
        else
          this.$message.error("删除失败");

      })
    },
    isAdmin(){
      this.adminInfo.password = localStorage.getItem("password")
      axios.post("/isAdmin",this.adminInfo).then( (res) => {
        if ( res.data === true){
          this.isAdminValue = true;
        }
      })
    },
    getInfo(){
      axios.get("/getComment",{params:{bId:this.b_id}}).then( (res) => {
        this.infos = res.data
      })
    },
    submit(commentForm){
      this.$refs[commentForm].validate( (valid) => {
        if ( valid ){
          this.sliderVConf.isShowSelf = true;
        }
        else {
          console.log("error");
        }
      })
    },
    commit(){
      this.sliderVConf.isShowSelf = false;
      this.info.bid = this.b_id;
      this.info.md5Password = localStorage.getItem("password");
      axios.post("/insertComment",this.info).then( (res) => {
          if (res.data === true){
            this.$message.info("已提交审核，待管理员审核通过后可显示");
            this.info.content = '';
            this.info.name = '';
            this.info.email = '';
            this.info.parentId = '';
            this.getInfo();
          }
          else
            this.$message.error("发表失败");
      })
    },
    gotoComment(name,pId,id){
      this.info.rname = name;
      if ( pId === -1){
        this.info.parentId = id;
      }
      else
        this.info.parentId = pId;
      document.getElementById("form").scrollIntoView({block: 'start',behavior: 'smooth'});
    }
  }
}
</script>
<style scoped>
.myPosition {
  position: absolute;
  left: 100px;
  top: -150px;
  transition: all .5s linear;
}
.dBColor >>> textarea {
  color: white !important;
  background-color: black !important;
  border: 0px !important;
}
.dBColor >>> input {
  color: white !important;
  background-color: black !important;
  border: 0px !important;
}
.toBody{
  color: cornflowerblue;

}
.nickname {
  color: #80887e;
  font-size: 10px;
}
.comment {
  font-size: 18px;
  margin-top: 5px;
}
.dateStyle {
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: #fcb82a;
}
.father {
  padding: 1rem;
}
.children {
  padding: 1rem 1rem 1rem 2rem;
}
.dBColor {
  background-color: black;
}
.lBColor {
  background-color: white;
}
</style>